<template>
  <div class="v-item" @click='goAlbum(id)'>
      <div class="img">
          <img v-lazy='img' alt=""   >

          <span class="count" v-if="countInfo">
              <van-icon name="play-circle-o" />{{countInfo.playCount | getCount}}
          </span>
      </div>
      <div class="bt">
          {{title}}
      </div>
  </div>
</template>

<script>
export default {
    props:{
        id:{
            type:Number
        },
        img:{
            type:String
        },
        title:{
            type:String
        },
        des:{
            type:String
        },
        countInfo:{
            type:Object
        }
        
    },
     methods:{
      
      goAlbum(id){
          
    //   
    //     
        if(this.$route.path.includes('/album/')){
            this.$router.push('/album/'+id)
            this.$router.go(0)
        }else{
            this.$router.push('/album/'+id)
        }

        // console.log(this.$route)
     
    }
    }
}
</script>

<style lang="scss" scoped>
.v-item{
    width: 109px;
    .img{
        width: 109px;
        height: 109px;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        background:url(../../assets/icon/common/img_load.png) no-repeat;
        background-size: 100% 100%;
        >img{
            width: 100%;
            height: 100%;
        }
        .count{
            height: 18px;
            position:absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            font-size: 13px;
            color: #fff;
            background-color:rgba(0,0,0,.5);
            display: block;
            padding-left: 2px;
            i{
                margin-right: 3px;
            }
        }
    }
    .bt{
        margin-top: 3px;
        color: #333;
        font-size: 13px;
        padding: 0 3px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
    }
}
</style>

